<template>
  <div class="merchandise">
    <h3>周边商品</h3>
    <div class="product-list">
      <div v-for="(product, index) in products" :key="index" class="product-item">
        <img :src="product.image" alt="商品图片" />
        <h4>{{ product.name }}</h4>
        <p>价格：￥{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Merchandise',
  data() {
    return {
      products: [
        { name: 'Taylor Swift T恤', price: 199, image: require('@/assets/merch1.jpg') },
        { name: 'Taylor Swift 帽子', price: 159, image: require('@/assets/merch2.jpg') },
        { name: 'Taylor Swift 手链', price: 99, image: require('@/assets/merch3.jpg') }
      ]
    }
  },
  methods: {
    addToCart(product) {
      alert(`已将 ${product.name} 加入购物车`)
    }
  }
}
</script>